<template>
	<view class="probox" v-if="visible">
	  <block v-if="prolist && prolist[0] && prolist[0]['type'] == 'gift_bag'">
	    <view class="probox_title">
	      <text class="probox_title-t1">礼包详情</text>
	      <text class="plbox_title-t2">({{prolist.length}})</text>
	    </view>
	  </block>
	  <block v-else>
	    <view class="probox_title">
	      <text class="probox_title-t1">全部商品</text>
	      <text class="plbox_title-t2">({{current.pronum}})</text>
	    </view>
	  </block>
		<image src="/static/img/close.png" class="plbox-close" @tap.stop="$emit('close')" />
		<scroll-view class="probox_content" scroll-y="true">
			<block v-for="(item, idx) in prolist" :key="item.id">
				<view v-if="item.type == 'shop'" class="probox_content-item" @tap="gotourl" :data-url="'/pages/shop/product?id='+item.id">
					<image :src="item.pic" class="probox_content-item-img" />
					<view class="probox_content-item-info">
						<text class="probox_content-item-name">{{item.name}}</text>
						<text class="probox_content-item-sales">{{item.sales}}人购买</text>
						<text class="probox_content-item-price">￥{{item.sell_price}}</text>
					</view>
					<view class="probox_content-item-btn"><text class="probox_content-item-btn-txt">立即抢购</text>
					</view>
				</view>
	      <view v-if="item.type == 'gift_bag'" class="probox_content-item" @tap.stop="gotourl" :data-url="'/pagesA/giftbag/detail?id=' + item.id+'&gbid=' + item.gbid+'&bid='+item.bid">
	      	<image :src="item.pic" class="probox_content-item-img" />
	      	<view class="probox_content-item-info" style="overflow: hidden;display: block;">
	      		<text class="probox_content-item-name">{{idx+1}}、 {{item.name}}</text>
	      		<view class="probox_content-item-price" style="flex-direction: unset;display:block;line-height: 60rpx;height: 60rpx;overflow: hidden;">
	            ￥{{item.sell_price}}
	            <view class="gbdesc">详情</view>
	          </view>
	          <text class="gbshortdesc" v-if="item.shortdesc" >{{item.shortdesc}}</text>
	      	</view>
	      </view>
			</block>
	    <block v-if="prolist && prolist[0] && prolist[0]['type'] == 'gift_bag'">
	      <view style="width:100%;height:110rpx;box-sizing:content-box" class="notabbarbot"></view>
	      <view class="bottombar flex-row" :class="menuindex>-1?'tabbarbot':'notabbarbot'">
	      	<view style="text-align: center;line-height: 100%;width: 50%;">
	          <text v-if="prolist[0]['pirce']>0">价格：￥{{prolist[0]['pirce']}}</text>
	          <text v-else>价格：免费</text>
	        </view>
	      	<view class="tobuy" :style="{margin:'0 auto'}" @tap.stop="goto" :data-url="'/pagesA/giftbag/buy?gbid=' + prolist[0]['gbid'] + '&num=1&bid='+prolist[0]['bid']" ><text>立即领取</text></view>
	      </view>
	    </block>
		</scroll-view>
	</view>
</template>

<script>
	const app = getApp()
	
	export default {
		props: {
			visible: Boolean,
			current: Object,
		},
		data() {
			return {
				pagenum: 1,
				prolist: [],
				nodata: false,
				nomore: false,
			}
		},
		watch: {
			visible(val) {
				if (val) this.getprolist()
			}
		},
		methods: {
			gotourl(e) {
				getApp().goto(e.currentTarget.dataset.url, e.currentTarget.dataset.opentype)
			},
			getprolist(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.prolist = [];
				}
				this.nodata = false;
				this.nomore = false;
				app.post('ApiShortvideo/getprolist', {
					id: this.current.id,
					pagenum: this.pagenum
				}, (res) => {
					const data = res.data;
					if (this.pagenum === 1) {
						this.prolist = data;
						if (data.length === 0) {
							this.nodata = true;
						}
					} else {
						if (data.length === 0) {
							this.nomore = true;
						} else {
							const prolist = this.prolist;
							const newdata = prolist.concat(data);
							this.prolist = newdata;
						}
					}
				});
			},
			getmoreprolist() {
				this.pagenum = this.pagenum + 1;
				if (!this.nomore && !this.nodata) {
					this.getprolist(true);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.probox {
		width: 750rpx;
		height: 700rpx;
		padding: 20rpx 20rpx;
		background: #fff;
		z-index: 999999;
		position: fixed;
		bottom: 0;
	}
	
	.probox-replyshadow {
		position: absolute;
		z-index: 7;
		background: rgba(0, 0, 0, 0.4);
		width: 750rpx;
		flex: 1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	.probox-close {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 7;
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;
	}
	
	.probox_title {
		height: 60rpx;
		line-height: 60rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row
	}
	
	.probox_title-t1 {
		font-size: 28rpx;
		color: #000;
		font-weight: bold
	}
	
	.probox_title-t2 {
		font-size: 28rpx;
		color: #000;
		font-weight: bold
	}
	
	.probox_content {
		height: 580rpx;
		overflow: scroll;
		display: flex;
	}
	
	.probox_content-item {
		display: flex;
		flex-direction: row;
		flex: 1;
		padding: 20rpx;
		position: relative
	}
	
	.probox_content-item-img {
		width: 188rpx;
		height: 188rpx;
		border-radius: 10rpx;
		flex-shrink: 0
	}
	
	.probox_content-item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 20rpx
	}
	
	.probox_content-item-name {
		color: #212121;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 40rpx;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.probox_content-item-sales {
		color: #999999;
		font-size: 24rpx;
		height: 50rpx;
		line-height: 50rpx
	}
	
	.probox_content-item-price {
		color: #FD4A46;
		font-size: 36rpx;
		font-weight: bold;
		height: 50rpx;
		line-height: 50rpx
	}
	
	.probox_content-item-btn {
		position: absolute;
		top: 140rpx;
		right: 20rpx;
		background: linear-gradient(-90deg, #FD4A46 0%, rgba(253, 74, 70, 0.76) 100%);
		border-radius: 26px;
		width: 150rpx;
		height: 54rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center
	}
	
	.probox_content-item-btn-txt {
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center
	}
	
	.plbox-close {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;
	}
</style>